body {overflow: hidden;
height: 100vh !important;
max-height: 100vh !important;
width: 100vw;
max-width: 100vw;
margin: 0;
padding: 0;}

.socialmenu {display: flex;
justify-content: center;
position: relative;
top: -7%;
left: 5%;}

#textdiv {color: lightblue;}

#mainText, #ajtak {color:white ;
    font-family: "McLaren";
    font-size: 32px;} 

#section1 {margin: 0;
    padding: 0;
    width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: rgb(19, 19, 19);
}

.obrazek img {
    height: 130vh;
    max-height: 130vh;   
    width: auto;
}

.obrazek {height: 100vh;
display: flex;
align-items: center;
position: relative;
bottom: 10%;
left: 65%;}

.fa {
    padding: 10px;
    font-size: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 10%;
  }

  .fa-facebook, .fa-instagram, .fa-reddit {
    text-align: center;}

        .fa-instagram,
        .fa-reddit {
            visibility: hidden;
            opacity: 0;
                transition: opacity 350ms;
        }
  
   .fa-facebook:hover {background: blue;
    color: white;}

   .fa-instagram:hover {
       color: white;
       background: radial-gradient(circle at 30% 30%, orange, rgb(255, 0, 106), purple, blue);
   }

   .fa-reddit:hover {
       background: orangered;
       color: white;
   }

.text {position: absolute;
top: 35%;
left: 5%;
}

.kruhy {position: absolute;
top: 38%;
left: 20%;}

#kruh1, #kruh2, #kruh3, #kruh4, #kruh5, #kruh6 {width: 105px;
    height: 105px;
border-radius: 50%;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
cursor: grab;}

#kruh1 {background-color: blue;}

#kruh2 {background-color: crimson;}

#kruh3 {background-color: purple;}

#kruh4 {background-color: darkgreen;}

#kruh5 {background-color: rgb(255, 102, 0);}

#kruh6 {background-color: darkcyan;}

#kruh2, #kruh3, #kruh4, #kruh5, #kruh6 {visibility: hidden;
opacity: 0%;}

a {color: white;
   font-family: "Open Sans"; 
   font-weight: 500;
   font-size: 14px;
text-decoration: none;}

a:hover {color: rgb(243, 255, 136);}

@media screen and (max-width: 1650px) {
    #mainText, #ajtak {
        font-size: 24px;} 

        .text {left: 3%;
        top: 33%;}
                .kruhy {
                    left: 25%;
                }
}

@media screen and (max-width: 1350px) {
    .obrazek {
            left: 55%;
        }
    
}

@media screen and (max-width: 1200px) {
        .text {top: 2%;
        left: 22%;}

        .socialmenu {left: 10%;}

        .obrazek {position: absolute;
        display: flex;
    top: 42%;
left: 50%;
transform: translate(-50%, -50%);}

                .obrazek img {
                    height: 100vh;
                    max-height: 100vh;
                    width: auto;
                }

                                #kruh1,
                                #kruh2,
                                #kruh3,
                                #kruh4,
                                #kruh5,
                                #kruh6 {width: 90px;
                                height: 90px;}

        .kruhy {left: 55%;
        top: 40%;}

        .socialmenu {top: 84%;}
}



@media screen and (max-width: 900px) {
    .text {
    left: 18%;}
}

@media screen and (max-width: 750px) {

    #mainText, #ajtak {
        font-size: 16px;} 

        .socialmenu {left: 15%;}
}

@media screen and (max-width: 500px) {

    .text {left: 12%;}

    #textdiv {margin-top: -0.5%;}
}

@media screen and (max-width: 410px) {

    .text {
        left: 5%;
    }

    .obrazek {left: 62.5%;}

    .socialmenu {left: 10%;}
}